<template>

  <div>
    <!-- 单选-->
    <div v-if="qType==0">
      <el-radio-group v-model="itemAns">
        <el-radio v-for="item in qItem" :key="item.prefix" :label="item.prefix" :disabled="true" >
          <span class="question-prefix">{{ item.prefix }}.</span>
          <span v-html="item.content" class="q-item-span-content"></span>
        </el-radio>
      </el-radio-group>


    </div>
    <div v-if="qType==1">
<!--      <el-checkbox-group @change="changeL" v-model="answer.contentArray">-->
<!--        <el-checkbox v-for="item in qItem" :label="item.prefix" :key="item.prefix">-->
<!--          <span class="question-prefix">{{ item.prefix }}.</span>-->
<!--          <span v-html="item.content" class="q-item-span-content"></span>-->
<!--        </el-checkbox>-->
<!--      </el-checkbox-group>-->
<!--      <div v-for="option in qItem" :key="option.prefix">-->
<!--        <input type="checkbox" v-model="checkAns" :value="option.content" :disabled="true">-->
<!--        {{ option.content }}-->
<!--      </div>-->

      <el-checkbox-group v-model="checkAns" :disabled="true">
        <!-- 循环渲染多选框 -->
        <el-checkbox v-for="item in qItem" :key="item.prefix" :label="item.prefix">
          {{ item.content }}
        </el-checkbox>
      </el-checkbox-group>
      <!-- 显示当前勾选的值 -->

    </div>
    <!-- 判断-->
    <div v-if="qType==2">
      <el-radio-group v-model="itemAns">
        <el-radio v-for="item in qItem" :key="item.prefix" :label="item.prefix" :disabled="true">
          <span v-html="item.content" class="q-item-span-content"></span>
        </el-radio>
      </el-radio-group>
<!--      <div style="margin-bottom: 5px">-->
<!--        <span style="margin-right: 10px">标答:</span>-->
<!--        <span>{{ itemAns }}</span>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>


export default {
  name: "questionPage",
  props: {
    qType: {
      type: String
    },
    itemAns: {
      type: String
    },
    qItem: {
      type: Array
    },
    answer: {
      type: Object,
      default: function () {
        return {id: null, content: '', contentArray: [], doRight: false}
      }
    },
  },
  data() {
    return {
      checkboxOptions: [
        {
          "prefix": "A",
          "content": "A"
        },
        {
          "prefix": "B",
          "content": "B"
        },
        {
          "prefix": "C",
          "content": "C"
        },
        {
          "prefix": "D",
          "content": "D"
        }
      ],
      // 初始化选中的选项，实现回显
      selectedOptions: [],
      ans: 0,
      contentArray: [],
      nedList: [],
      checkAns: []
    }
  },
  created() {
    if (this.qType == 1) {
      this.checkAns = JSON.parse(this.itemAns)
      // this.checkboxOptions = this.qType
    }
  },
  methods: {
    changeL() {
      // eslint-disable-next-line vue/no-mutating-props
      this.checkAns = JSON.stringify(this.answer.contentArray)
    }
  }
}
</script>


<style scoped lang="scss">

/deep/ .el-radio__original {
  display: none !important; /* 隐藏原生 radio 输入，但仍然允许交互 */
}

/deep/ .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}

::v-deep .el-radio {
  display: block;
  margin-bottom: 10px;
}

::v-deep .el-checkbox {
  display: block;
}
//::v-deep .el-radio.is-disabled.is-checked .el-radio__label {
//  color:#409EFF; /* 这里将文字颜色改成红色，你可以按需修改 */
//}
//
///* 覆盖禁用状态下单选框的圆点颜色 */
//::v-deep .el-radio.is-disabled.is-checked .el-radio__inner {
//  background-color:#409EFF; /* 这里将圆点颜色改成红色，你可以按需修改 */
//  border-color:#409EFF; /* 这里将圆点边框颜色改成红色，你可以按需修改 */
//}
///* 覆盖禁用多选框的背景颜色 */
//input[type="checkbox"]:disabled {
//  /* 把背景颜色改成蓝色，可按需调整 */
//  background-color: blue;
//}
//
///* 覆盖禁用多选框的勾选标记颜色 */
//input[type="checkbox"]:disabled:checked::before {
//  /* 把勾选标记颜色改成黄色，可按需调整 */
//  color: yellow;
//}
//
///* 覆盖禁用多选框关联文字的颜色 */
//input[type="checkbox"]:disabled + span {
//  /* 把文字颜色改成绿色，可按需调整 */
//  color: green;
//}
</style>
